<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compaatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <title>Document</title>
        <link rel="stylesheet" href="./css/reset.css"/>
        <link rel="stylesheet" href="./css/header.css"/>
        <link rel="stylesheet" href="./css/common.css"/>
        <link rel="stylesheet" href="./css/product-maintain.css"/>
    </head>
    <body>
        <div class="app-header">
            <div class="header__main">
                <section>
                    <a class="section__logo"><img src="./images/logo.png" alt=""/></a>
                    <a>总览</a>
                    <a class="section__arrow">云产品</a>
                </section>
                <section>
                    <a class="section__search"><input type="text" placeholder="搜索你想要的内容..."><img src="./images/icon-search.png" alt=""></a>
                    <a class="section__wx"><img src="./images/icon-wx.png" alt=""><span>小程序</span></a>
                    <a class="section__email"><img src="./images/icon-mail.png" alt=""><span>14</span></a>
                    <a class="section__arrow">集团账号</a>
                    <a class="section__arrow">工具</a>
                    <a class="section__arrow">支持</a>
                    <a class="section__arrow">费用</a>
                    <a class="section__arrow section__user"><img src="./images/icon-user.png" alt=""></a>
                </section>             
            </div>
        </div>
        <div class="app-container">
            <div class="container__group">
                <div class="group__item" ><span>产品管理</span></div>
                <div class="group__item" ><span>产品监控</span></div>
                <div class="group__item active" ><span>产品运维</span></div>
            </div>





            <div class="container__main">
                <section>
                    <div class="app-card recent-visit">
                        <main>
                            <div class="main_search">
                                <input type="text" placeholder="输入搜索内容" />
                                <img src="./images/maintain-images/形状(6).png" alt="" />
                            </div>

                            <div class="main_title">最近访问</div>
                        </main>

                        <footer>
                            <div class="footer_item">
                                <div class="item_info">
                                    <img src="./images/maintain-images/形状.png" alt="" />
                                    <span>云大数据平台</span>
                                </div>
                            </div>
                            <div class="footer_item">
                                <div class="item_info">
                                    <img src="./images/maintain-images/形状(1).png" alt="" />
                                    <span>管理与审计</span>
                                </div>
                            </div>
                            <div class="footer_item">
                                <div class="item_info">
                                    <img src="./images/maintain-images/形状(2).png" alt="" />
                                    <span>企业通信服务</span>
                                </div>
                            </div>
                            <div class="footer_item">
                                <div class="item_info">
                                    <img src="./images/maintain-images/形状(3).png" alt="" />
                                    <span>私域安全服务平台</span>
                                </div>
                            </div>
                            <div class="footer_item">
                                <div class="item_info">
                                    <img src="./images/maintain-images/形状(4).png" alt="" />
                                    <span>云智大数据应用</span>
                                </div>
                            </div>
                            <div class="footer_item">
                                <div class="item_info">
                                    <img src="./images/maintain-images/形状(5).png" alt="" />
                                    <span>私有域解析 Private DNS</span>
                                </div>
                            </div>
                        </footer>
                    </div>




                    <div class="app-card week-recommend">
                        <header><span>本周推荐</span></header>

                        <main>
                            <div class="main_container">
                                <div class="container_title">主机安全（CWP），全面检测云内外主机风险</div>

                                <div class="container_text">
                                    主机安全基于企业云安全积累的海量威胁数据，利用机器学习为用户提供资产管理、木马文件查杀、黑客入侵检测、漏洞风险预警及安全基线等安全防护服务，帮助企业构建服务器安全防护体系。
                                </div>

                                <button><span>查看详情</span></button>
                            </div>
                        </main>
                    </div>




                    <div class="app-card selected-content">
                        <header><span>精选内容</span></header>

                        <main>
                            <div class="main_item">
                                <section>
                                    <img src="./images/maintain-images/位图.png" alt="" />
                                    <div class="section-title">企业云积分商城</div>
                                    <div class="section-content">开通积分商城特权，完成任务获取积分，兑换奖品</div>
                                </section>
                            </div>
                            <div class="main_item">
                                <section>
                                    <img src="./images/maintain-images/位图(1).png" alt="" />
                                    <div class="section-title">上云迁移扶持项目</div>
                                    <div class="section-content">助力企业优化业务结构，协同客户平稳迁移</div>
                                </section>
                            </div>
                            <div class="main_item">
                                <section>
                                    <img src="./images/maintain-images/位图(2).png" alt="" />
                                    <div class="section-title">企业客户免费体验馆</div>
                                    <div class="section-content">完成企业认证，立享企业客户专属免费产品</div>
                                </section>
                            </div>
                        </main>
                    </div>
                </section>





                <section>
                    <div class="app-card todo-list">
                        <header><span>待办事项</span></header>

                        <main>
                            <div class="main_item">
                                <section>
                                    <div class="section_name">待支付订单</div>
                                    <div class="section_value">
                                        <span class="status--warn">10</span>
                                        <span>个</span>
                                    </div>
                                </section>
                            </div>
                            <div class="main_item">
                                <section>
                                    <div class="section_name">待办工单</div>
                                    <div class="section_value">
                                        <span>0</span>
                                        <span>个</span>
                                    </div>
                                </section>
                            </div>
                            <div class="main_item">
                                <section>
                                    <div class="section_name">待续费项</div>
                                    <div class="section_value">
                                        <span class="status--warn">14</span>
                                        <span>个</span>
                                    </div>
                                </section>
                            </div>
                            <div class="main_item">
                                <section>
                                    <div class="section_name">工单总数</div>
                                    <div class="section_value">
                                        <span>24</span>
                                        <span>个</span>
                                    </div>
                                </section>
                            </div>
                        </main>
                    </div>





                    <div class="app-card new-notice">
                        <header><span>最新公告</span><a>查看更多</a></header>

                        <main>
                            <div class="main_item">
                                <section>
                                    <div class="section-day">06</div>
                                    <div class="section-month">Jan</div>
                                </section>
                                <section>
                                    <span>
                                        <span class="section-tag"><span>网络优化</span></span>
                                        企业云将于2022年01月10日对弗 吉尼亚一区网络设备升级优化通知
                                    </span>
                                </section>
                            </div>
                            <div class="main_item">
                                <section>
                                    <div class="section-day">05</div>
                                    <div class="section-month">Jan</div>
                                </section>
                                <section>
                                    <span>
                                        <span class="section-tag"><span>运营活动</span></span>
                                        运营商将于2022年01月08日凌晨中国香港地区链路割接通知
                                    </span>
                                </section>
                            </div>
                            <div class="main_item">
                                <section>
                                    <div class="section-day">04</div>
                                    <div class="section-month">Jan</div>
                                </section>
                                <section>
                                    <span>
                                        <span class="section-tag"><span>网络优化</span></span>
                                        企业云将于2022年01月10日对弗吉尼亚一区网络设备升级优化通知
                                    </span>
                                </section>
                            </div>
                            <div class="main_item">
                                <section>
                                    <div class="section-day">03</div>
                                    <div class="section-month">Jan</div>
                                </section>
                                <section>
                                    <span>
                                        <span class="section-tag"><span>运营活动</span></span>
                                        运营商将于2022年01月08日凌晨成都地区链路割接通知
                                    </span>
                                </section>
                            </div>
                        </main>
                    </div>




                    <div class="app-card new-release">
                        <header><span>最新发布</span><a>查看更多</a></header>

                        <main>
                            <section>
                                <img src="./images/maintain-images/矩形(1).png" alt="" />
                                <div class="section_info">
                                    <div class="info_title"><span>服务网格-新品上线</span><span>2021-12-10</span></div>
                                    <div class="info_content">服务网格是一致、可靠、透明的云原生应用通信网络管控基础平台</div>
                                </div>
                            </section>
                            <section>
                                <div class="section_info">
                                    <div class="info_title"><span>商机雷达-新品上线</span><span>2021-12-09</span></div>
                                    <div class="info_content">商机雷达通过从海量、复杂的数据中筛选有效信息，对企业目标用户画像、客户关系进行智能分析和梳理…</div>
                                </div>
                                <div class="section_info">
                                    <div class="info_title"><span>商机魔方-新品上线</span><span>2021-12-08</span></div>
                                    <div class="info_content">商机魔方通过从海量、复杂的数据中筛选出有效信息，对企业目标用户画像、客户关系进行智能分析…</div>
                                </div>
                            </section>
                        </main>
                    </div>


                </section>
            </div>
        </div>
    </body>
</html>